<template>
  <div class="w-full p-2">
    <component :is="component" v-model="model" />
  </div>
</template>

<script setup lang='ts'>
import task_image_text from './taskInfoForms/taskImageText.vue'
import task_micro_course from './taskInfoForms/taskMicroCourse.vue'
import task_practice from './taskInfoForms/taskPractice.vue'
import task_word from './taskInfoForms/taskWord.vue'
import task_live from './taskInfoForms/taskLive.vue'
import task_data_download from './taskInfoForms/taskDataDownload.vue'
import task_video_slicing from './taskInfoForms/taskVideoSlicing.vue'
const model = defineModel();
watchEffect(()=>{
  console.log(model)
})

const attrs = useAttrs() as any;
const component = computed(() => {
  return {
    task_image_text,
    task_micro_course,
    task_practice,
    task_word,
    task_live,
    task_data_download,
    task_video_slicing,
  }[attrs.data.taskable_type];
})


watch(()=>attrs.data.taskable_type,(type)=>{
  model.value = undefined;
})
</script>

<style></style>
